<!--
 * @Descripttion: 首页
 * @version: 0.1
 * @Author: Ran
-->


<template>
	<div class="cus-page">
		<!-- 头部搜索 -->
		<ct-navbar 
			leftIconType="msg" 
			:search="{show:true,disabled:true}" 
			@goNews="goNews" 
			@goSearch="goSearch">
		</ct-navbar>

		<!-- 轮播图 -->
		<view class="com-m-t-20 type-area">
			<u-swiper height="300rpx" radius="24rpx" :list="banner.list"></u-swiper>
			<view class="com-m-t-24 com-flex com-row-between menu">
				<view v-for="(item,index) in banner.menu" :key="index" 
					class="com-flex item" @tap="jump(item.url)">
					<u-icon :name="item.icon" size="36rpx"></u-icon>
					<text class="com-m-l-8 com-m-r-4">{{item.title}}</text>
					<u-icon name="arrow-right" color="#888" size="28rpx"></u-icon>
				</view>
			</view>
		</view>

		<!-- 今日推荐 -->
		<view class="com-m-t-56 recommend">
			<view class="type-area com-flex com-row-between com-title">
				<text class="com-font-40 com-font-bold">今日推荐</text>
				<view class="com-flex com-assist-color" @tap="jump('/pages/home/recommend')">
					<text class="com-m-r-12">更多</text>
					<u-icon name="arrow-right" color="#888" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="com-m-t-32 com-p-l-32 srcoll">
				<view v-for="item in 6" :key="item" class="com-m-r-32 item">
					<image src="/static/temporary/img2.jpg" alt=""></image>
					<view class="text">
						<text class="u-line-2 title">宝可梦集换式卡牌游戏PTCG 简中...</text>
						<view class="com-m-t-24 com-price-color">
							<text class="com-font-32 com-font-bold">1660</text>
							<text class="com-font-28">日元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="com-m-t-32 type-area">
				<view class="com-flex com-flex-wrap card">
					<view v-for="(item,index) in recommendCardList" :key="index" class="com-flex-col com-col-center item">
						<image :src="item.src" alt=""></image>
						<text class="com-m-t-16">{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 活动专题 -->
		<view class="com-m-t-56 type-area">
			<view class="com-flex com-row-between com-title">
				<text class="com-font-40 com-font-bold">活动专题</text>
				<view class="com-flex com-assist-color" @tap="jump()">
					<text class="com-m-r-12">更多</text>
					<u-icon name="arrow-right" color="#888" size="28rpx"></u-icon>
				</view>
			</view>
			<view v-for="item in 3" :key="item"
				class="com-m-t-30 activity-item">
				<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" alt="" mode="widthFix"></image>
				<view class="title">
					<text class="u-line-1 com-font-32">复古情怀好物推荐,年了我依旧喜欢,单行文本溢出隐藏</text>
				</view>
			</view>
		</view>

		<!-- 购物指南 -->
		<view class="com-m-t-56 type-area">
			<view class="com-flex com-row-between com-title">
				<text class="com-font-40 com-font-bold">购物指南</text>
				<view class="com-flex com-assist-color" @tap="jump('/pages/home/shopping-directory')">
					<text class="com-m-r-12">更多</text>
					<u-icon name="arrow-right" color="#888" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="com-m-t-32">
				<ct-waterfall-flow />
			</view>
		</view>

		<!-- 底部间距 -->
		<u-gap height="30rpx" bgColor="transparent"></u-gap>

		<!-- model -->
		<u-popup :show="integralPopupShow" 
			mode="center"
			bgColor="transparent">
			<view class="integral-model">
				<view class="com-m-b-40 com-rela">
					<image class="com-abso pop-bg" src="/static/home/pop_bg.png"></image>
					<view class="com-rela content">
						<view class="com-flex-col com-col-center">
							<text style="font-size:96rpx;color:#F31800">300</text>
							<text class="com-font-32" style="color:#F31800">日元积分</text>
							<text class="com-m-t-28 com-font-40" style="color:#F08B21">新人注册大礼包</text>
						</view>
						<view class="com-m-t-60 com-rela">
							<image class="com-abso pop-btn" src="/static/home/pop_btn.png"></image>
							<view class="com-rela button">兑换使用</view>
						</view>
					</view>
				</view>
				<u-icon name="close-circle" size="70rpx" color="#fff" @tap="integralPopupShow=false"></u-icon>
			</view>
		</u-popup>
	</div>
</template>


<script>
export default {
	name: "",
	props: {},
	components: {},
	data() {
		return {
			sysInfo: this.mixinGetSysInfo(),
			banner: {
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				menu: [
					{ icon:"/static/home/menu1.png", title:"新手必看", url: "" },
					{ icon:"/static/home/menu2.png", title:"国际物流", url: "/pages/me/logistics-expenses" },
					{ icon:"/static/home/menu3.png", title:"费用构成", url: "" },
				],
			},
			recommendCardList: [
				{ src: "/static/temporary/icon1.png", title: "卡牌" },
				{ src: "/static/temporary/icon2.png", title: "二次元" },
				{ src: "/static/temporary/icon3.png", title: "日饭圈" },
				{ src: "/static/temporary/icon4.png", title: "游戏" },
				{ src: "/static/temporary/icon5.png", title: "生活穿搭" },
				{ src: "/static/temporary/icon6.png", title: "美妆护肤" },
			],
			// 积分模态框
			integralPopupShow: false,
		};
	},

	computed: {},
	watch: {},

	onLoad(){
		setTimeout(() => {
			this.integralPopupShow = true;
		}, 10000);
	},
	mounted() {},
	
	onReachBottom() {
		uni.$u.toast("页面滚动到底部了")
	},
	onPullDownRefresh() {
		setTimeout(() => {
			console.log("关闭下拉刷新")
			uni.stopPullDownRefresh()
		}, 3000);
	},

	methods: {
		// 去消息页面
		goNews(){
			uni.navigateTo({ url:"/pages/home/news" })
		},

		// 去搜索页面
		goSearch(){
			uni.navigateTo({ url:"/pages/home/search" })
		},

		// 跳转
		jump(url){
			if(url){
				uni.navigateTo({url:url})
			}else{
				uni.$u.toast("未找到相关UI设计")
			}
		}
	}
};
</script>


<style scoped lang='scss'>
	.cus-page{
		position: relative;
		z-index: 10;
	}
	.recommend{
		.srcoll{
			white-space: nowrap; 
			overflow-x: auto;
			.item{
				display: inline-block;
				image{
					width: 270rpx;
					height: 270rpx;
					border-radius: 24rpx 24rpx 0 0;
				}
				.text{
					width: 270rpx;
					background: #fff;
					padding: 20rpx 24rpx;
					border-radius: 0 0 24rpx 24rpx;
					.title{
						white-space: pre-wrap; 
						line-height: 40rpx;
					}
				}
			}
		}
		.card{
			background: #fff;
			border-radius: 24rpx;
			padding: 48rpx 54rpx 0;
			.item{
				margin-bottom: 48rpx;
				margin-right: 78rpx;
				&:nth-child(3n){
					margin-right: 0;
				}
				image{
					width: 140rpx;
					height: 140rpx;
				}
			}
		}
	}
	.activity-item{
		border-radius: 24rpx;
		overflow: hidden;
		image{
			width: 100%;
			height: 376rpx;
		}
		.title{
			background: #fff;
			padding: 32rpx;
		}
	}
	/* 积分模态框 */
	/deep/.integral-model{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.pop-bg{
			width: 570rpx;
			height: 670rpx;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.content{
			width: 570rpx;
			height: 670rpx;
			z-index: 10;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			.pop-btn{
				width: 430rpx;
				height: 120rpx;
				top: 0;
				left: 0;
				z-index: 1;
			}
			.button{
				width: 430rpx;
				height: 120rpx;
				z-index: 10;
				font-size: 50rpx;
				color: #fff;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}
</style>